<template>
    <div class="tb">
        <div class="t">
            <ul>排序：
                <li v-for="(item, index) in option" :key="index" :class="{ inyes: current == index }"
                    @click="clickHandle(index)">{{ item.txt }}</li>
            </ul>
        </div>
        <div class="b">
            <ul>分类：
                <li v-for="(item, index) in option2" :key="index" :class="{ inyes: current2 == index }"
                    @click="clickHandle2(index)">{{ item.txt }}
                </li>

            </ul>
        </div>
    </div>
</template>

<script>


export default {
    props: ['param'],
    data() {
        return {
            option: [
                { min: 0, max: 100000, txt: "全部" },
                { min: 0, max: 0, txt: "我能兑换的" },
                { min: 0, max: 1000, txt: "0-1000个" },
                { min: 1000, max: 2500, txt: "1000-2500个" },
                { min: 2500, max: 6500, txt: "2500-6500个" },
                { min: 6500, max: 10000, txt: "6500-10000个" },
            ],
            option2: [
                { type: 0, txt: "全部" },
                { type: 1, txt: "实物礼品" },
                { type: 2, txt: "虚拟礼品" },
            ],
            current: 0,
            current2: 0,
        }
    },
    methods: {
        clickHandle(val) {
            this.current = val
             this.params.min = this.option[index].min;
             this.params.max = this.option[index].max;
        },
        clickHandle2(val) {
            this.current2 = val
        }
    }
}
</script>

<style lang="less" scoped>
.inyes {
    color: #00329b !important;
}

.sort {
    font-size: 16px;

    li {
        color: #999999;
        cursor: pointer;
    }

    .t ul {
        display: flex;
        padding: 20px 0;

        li {
            padding: 0 15px;
            cursor: pointer;

        }
    }

    .b ul {
        display: flex;
        padding: 20px 0;

        li {
            padding: 0 15px;
        }
    }
}
</style>